(function(window, document) {

window.onload = function() {
//////////////////////////////////////////////////////////
////////////////////// 変数 //////////////////////////////
/////////////////////////////////////////////////////////

	var state = 'wait';
	var target = '';
	var targetNum = null;
	var view = 'contents';
	var coverElm =    document.getElementById('cover');    //アイドリング時に表示
	var contentsElm = document.getElementById('contents'); //人検出時に表示
	var pageElm =     document.getElementById('page');     //タッチパネル操作時に表示

	//タッチパネル操作時の表示画像	
	var pageURL = [
		'url(img/page0.jpg)',
		'url(img/page1.jpg)',
		'url(img/page2.jpg)',
		'url(img/page3.jpg)',
		'url(img/page4.jpg)',
		'url(img/page5.jpg)'
	];

	//FEZ PANDAのIPアドレス
	var spiderUrl = 'http://169.254.62.244/';
	//ローカルで動かしているwebsocketサーバのurl(localhostのポート番号)
	var wsUrl = "ws://localhost:8182";
	var webSocket = null;

//////////////////////////////////////////////////////////
///./////////////// ブラウザのイベントリスナ /////////////////
/////////////////////////////////////////////////////////

	window.onmousedown = mouseDownListener;
	window.onmouseup = mouseUpListener;
	window.onmousewheel = wheelEnabler;

/////////////////////////////////////////////////////////
////////////////// web socketのイベントリスナ //////////////
/////////////////////////////////////////////////////////	

	if(typeof WebSocket != "undefined") {
	    webSocket = new WebSocket(wsUrl);
	}
	else if(typeof MozWebSocket != "undefined") {
	    webSocket = new MozWebSocket(wsUrl);
	}

	if(webSocket) {
    	console.log("init");
    	webSocket.onopen = function() {
    		//console.log("opend");
    	};

   		webSocket.onmessage = function(e) {
    		console.log(e.data);
    		if (view === 'page') {
    			viewContents();
    		}
    		//キネクトが人を検出
    		if (e.data === "detect") {
    			state = 'detect';

    			//IE10は異なるドメインにXMLHttpRequestできる！！！
    			var httpObj = new XMLHttpRequest();
				httpObj.open("GET",spiderUrl + "detect", true);
				httpObj.send(null);
    			
    			contentsElm.style.zIndex = '2'
    			coverElm.style.zIndex = '1';

    			contentsElm.style.opacity = '1.0';
    			coverElm.style.opacity = '0.0';
    			
    		} else if (e.data === "wait") {
    			state = 'wait';

    			//IE10は異なるドメインにXMLHttpRequestできる！！！
    			var httpObj = new XMLHttpRequest();
				httpObj.open("GET",spiderUrl + "wait", true);
				httpObj.send(null);

    			coverElm.style.backgroundImage = 'url(img/end.jpg)';
    			coverElm.style.zIndex = '2';
    			contentsElm.style.zIndex = '1'

    			coverElm.style.opacity = '1.0';
    			contentsElm.style.opacity = '0.0';
    			setTimeout(function() {restart();}, 5000);
    		}
    	};

	    webSocket.onclose = function() {
			console.log("closed...");
	    };
	}
	console.log(webSocket);

/////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////
	
	//menu画面が押されたらpageに遷移
	//page画面が押されたらmenuに遷移
    function mouseDownListener(e) {
		if (e.target.parentElement.className === 'menu') {
			webSocket.send('action');

			target = e.target.parentElement;
			for (var i = 0; i < target.parentElement.children.length; i += 1) {

				if (target.parentElement.children[i].id === target.id) {
					targetNum = i;
				}
			}
		} else if (e.target.id === 'page'){
			target = '';
			targetNum = null;
			viewContents();
		} else {
			target = '';
			targetNum = null;
		}
	}

	function mouseUpListener(e) {
		if (e.target.parentElement === target) {
			sendHttp();
			viewPage();
		} else {
			target = '';
			targetNum = null;
		}
	}

	//スクロールを禁止する
	function wheelEnabler(e) {
		if (e.preventDefault) {
			e.preventDefault();
		}

	}

	function drawPage() {
		pageElm.style.backgroundImage = pageURL[targetNum];
	}

	function viewPage() {
		drawPage();
		contentsElm.style.left = '-100%';
		pageElm.style.left = '0';
		view = 'page';
	}
	//メニューに戻るときFEZ PANDAに'menuReset'を送信
	function viewContents() {
		var httpObj = new XMLHttpRequest();

		httpObj.open("GET",spiderUrl + "menuReset", true);
		httpObj.send(null);

		contentsElm.style.left = '0';
		pageElm.style.left = '100%';
		view = 'contents';
	}
	//メニューがタップされたらFEZ PANDAに'menu'+　番号を送信
	function sendHttp() {
		var httpObj = new XMLHttpRequest();

		httpObj.open("GET",spiderUrl + "menu" + targetNum, true);
		httpObj.send(null);
	}

	function restart() {
		coverElm.style.backgroundImage = 'url(img/start.jpg)';
	}
}

}(window, document));